<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>在线考试系统</title>
<%@include file="../../common/include-header.jsp" %>
<link href="/static/css/unifiedTest.css" rel="stylesheet">
<body class="gray-bg">
<div id="box">
    <ul id="exams">
        <c:if test="${empty exams}">
            <li style="font-size: 25px;text-align: center;margin-top: 50px">
                目前没有任何需要您参加的测试！
            </li>
        </c:if>
        <c:if test="${not empty exams}">
            <c:forEach items="${exams}" var="exam">
                <li class="exam" examTime="${exam.examTime}" duration="${exam.testPaper.duration}">
                    <div class="leftDiv">
                        <p>${exam.title}</p>
                        <p style="font-size: 16px">
                            (考试时间：<fmt:formatDate value="${exam.examTime}"
                                                  pattern="yyyy年MM月dd日 HH:mm:ss"></fmt:formatDate>
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            最后入场时间：<span class="endEntryTime"></span>
                            ）
                        </p>
                    </div>
                    <div class="rightDiv">
                        <button examId="${exam.id}" isJoin="${exam.isJoin}"  class="startExam forbid">开 始 考 试</button>
                    </div>
                </li>
            </c:forEach>
        </c:if>
    </ul>
</div>
<%@include file="../../common/include-footer.jsp" %>
<script src="/static/plugin/select/select2.js"></script>
</body>
<script>
    $(function () {
        updateBtnClass();
        interval();

        for (var i = 0; i < $(".exam").length; i++){
            var duration = $($(".exam")[i]).attr("duration");
            var endEntryTime = cstConvertGmt($($(".exam")[i]).attr("examTime"));
            endEntryTime.setMinutes(endEntryTime.getMinutes() + duration / 2);
            var date = new Date(endEntryTime);
            var YY = date.getFullYear() + '年';
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
            var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            endEntryTime =  YY + MM + DD +" "+hh + mm + ss;

            $($(".exam")[i]).find(".endEntryTime").text(endEntryTime)
        }

        $(".startExam").click(function () {
            if ($(this).hasClass("allow")){
                var examId = $(this).attr("examId");
                location.href = "/exam/createExamPage?examId=" + examId;
            }
        });
    })

    function cstConvertGmt(strDate) {
        var date = new Date(strDate);
        date.setHours(date.getHours() - 14);
        return date;
    }

    function updateBtnClass() {
        var currentTime = new Date();//当前时间
        for (var i = 0; i < $(".startExam").length; i++) {
            var $startExam = $($(".startExam")[i]);
            var examTime = cstConvertGmt($startExam.parents(".exam").attr("examTime"));//开始考试时间
            var minutes = $startExam.parents(".exam").attr("duration") / 2;
            var endEntryTime = cstConvertGmt($startExam.parents(".exam").attr("examTime"));//最终进入时间
            endEntryTime.setMinutes(endEntryTime.getMinutes() + minutes);
            var isJoin = $startExam.attr("isJoin");
            if (isJoin == "false"){
                if (currentTime < examTime) {
                    $startExam.removeClass("allow");
                    $startExam.addClass("forbid");
                } else if (currentTime > endEntryTime) {
                    $startExam.removeClass("allow");
                    $startExam.addClass("forbid");
                } else {
                    $startExam.removeClass("forbid");
                    $startExam.addClass("allow");
                }
            }
        }
    }

    function interval() {
        setInterval(function (index) {
            if ($(".startExam").length == 0) {
                clearInterval(index)
            }

            updateBtnClass();
        }, 1000)
    }
</script>
</html>
